<template>
  <div v-show="show" class="box-dialog">
    <h2>我是个弹层</h2>
    <p>{{ modelValue }}</p>
    <button @click="emit('update:modelValue', Math.random())">修改modelValue</button>
    <hr />
    <p>
      <button @click="emit('update:show', false)">确定</button>
      <button @click="emit('update:show', false)">取消</button>
    </p>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  modelValue: number
  show: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', data: number): void
  (e: 'update:show', data: boolean): void
}>()
</script>

<style scoped>
.box-dialog {
  width: 300px;
  padding: 20px;
  border: 2px solid red;
  box-shadow: 0 0 7px #000;
}
</style>
